<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .yes {
      background-color: red;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .noadress {
      background-color: yellow;
      width: 100%;
      height: 100%;
      justify-content: center;
      display: flex;
      align-items: center;
    }

    .no {
      background-color: greenyellow;
      width: 100%;
      height: 100%;
      justify-content: center;
      display: flex;
      align-items: center;
    }

    table {
      /* width: 500px; */
      /* height: 500px; */
      margin: auto;
      margin-top: 50px;
    }

    .table {

      margin-top: 50px;
    }

    td {
      width: 100px;
      height: 50px;
      text-align: center;

    }

    .tr {
      width: 100%;
    display: flex;
    align-items: center;
    }

    .td {
      width: 100px;
      height: 50px;
      text-align: center;
      border: 1px solid #333;
      display: inline-block;
      border-radius: 5px;
    }

    .fx {
      margin: auto;
      width: 100px;
      font-size: 20px;
      text-align: center;
      margin-top: 20px;
    }



    .dialog {

      position: fixed;
      width: 300px;
      height: 300px;
      top: 50%;
      left: 50%;
      margin-top: -150px;
      margin-left: -150px;
    }

    .nan {
      position: fixed;
      left: 50%;
      bottom: 20px;
    }

    .dong {
      position: fixed;
      left: 20px;
      top: 50%;
    }

    .xi {
      position: fixed;
      right: 20px;
      top: 50%;
    }

    .one {
      width: 100%;
      height: 100%;
    }

    .title {
      margin: auto;
      width: 500px;
      text-align: center;
    }

    .address {
      width: 100vw;
      display: flex;
      justify-content: center;
    }

    .btnbox {
      width: 250px;
      position: absolute;
      right: 50px;
      top: 50px;
    }

    .aa {
      /* display: flex; */
      /* justify-content: center; */
      margin-left: 80px;
    }

    .nocome {
      background-color: gray;
      width: 100px;
      height: 50px;
      justify-content: center;
      display: flex;
      align-items: center;
    }

    .tishi {
      margin-left: 20px;
    }

    .yanse {
      width: 30px;
      height: 20px;
      display: inline-block;
    }

    .one {
      background-color: yellow;
    }

    .two {
      background-color: greenyellow;
    }

    .three {
      background-color: red;
    }

    .four {
      background-color: gray;
    }

    .txt {
      display: inline-block;
      margin-left: 10px;

    }

    .box1 {
      display: flex;

    }
  </style>
  <script src="./vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="index.css">

  <!-- 引入组件库 -->
  <script src="index.js"></script>
  <script src="./axios.min.js"></script>
  <script src="./qs.min.js"></script>
</head>

<body>

  <div id="app">
    <div class="fx">北</div>
    <div class="nan">南</div>
    <div class="dong">东</div>
    <div class="xi">西</div>
    <h1 class="title">区域工位人员情况查看图</h1>
    <!-- 颜色对应含义 -->
    <div class="tishi">
      <div class="box1">
        <div class="yanse two"></div>
        <div class="txt">正常使用</div>
      </div>
      <div class="box1">
        <div class="yanse four"></div>
        <div class="txt">工位闲置</div>
      </div>
      <div class="box1">
        <div class="yanse three"></div>
        <div class="txt">不可用</div>
      </div>
      <div class="box1">
        <div class="yanse one"></div>
        <div class="txt">不是工位</div>
      </div>



    </div>

    <!-- 地址展示表格 -->
    <div class="address">
      <div class="gw table" border="1px soild red" v-if="arr.length>0">
        <div class="tr" v-for="item in arr">
          <div class="td" v-for="item1,index in item.y" :key='index'>
            <div :class="item1.cla" style="color:#0000E3; font-size: 16px; font-weight: bold;">
              {{item1.user_name}}
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>

  <script>
    // window.location.href='http://127.0.0.1:5501/gongwei.html?address_id=2&area_id=32'
    console.log(true == 1);
    console.log(false == 0);
    console.log(true == 'TRUE', '0000');
    new Vue({
      el: '#app',
      data: {
        dialogVisible: false,//新增的弹框
        editdialogVisible: false,//修改的弹框
        is_create: null,//是否已经创建过
        form: {
          x: '',
          y: '',
        },
        editform: {
          x: '',
          y: '',
          is_position: '',//是否可用
          can_use: ''  // true,绿色有人用 ?false ?红色没人用


        },
        arr: [],
        data: {
          area_id: null,
          info: null
        }
      },
      methods: {
        //提价工位数据给接口


        look() {
          axios({
            method: 'get',//提交方法
            url: 'http://www.dstaxweb.com/general/ds/office_address/position/api/area_position_idle.php',//提交地址
            // url: 'http://127.0.0.1:98/general/ds/office_address/position/api/area_position_idle.php',//提交地址
            params: {
              area_id: this.data.area_id,
            }
          }).then((res) => {
            console.log(res);
            if (res.data.code == 0) {
              if (res.data.data.info.position.length > 0) {
                var arr = JSON.parse(JSON.stringify(res.data.data.info.position))
                // this.is_create = true
                for (var i in arr) {
                  for (var j in arr[i].y) {
                    var item = arr[i].y[j];
                    if (!item.is_position) {
                      item.cla = 'noadress';
                    } else if (!item.can_use) {
                      item.cla = 'yes';
                    } else if (item.is_idle) {
                      item.cla = 'nocome';
                    } else {
                      item.cla = 'no';
                    }
                  }
                }
                this.arr = arr;
              }
            } else {

              alert(res.data.message)

            }
          })
          // 调取接口给工位的数据赋值
        },
        //点击新增弹框里面的取消

      },
      mounted() {

        this.data.area_id = window.location.search.split('area_id=')[1]
        this.look()
      }
    })
  
  </script>
</body>

</html>